<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>分类缩略图</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: Arial, sans-serif;
    }
    .container {
      width: 180px;
      height: 100%;
      display: flex;
      border: 1px solid #ccc;
    }
    .categories {
      width: 60px;
      background-color: #f0f0f0;
      border-right: 1px solid #ccc;
      display: flex;
      flex-direction: column;
    }
    .category {
      padding: 5px;
      text-align: center;
      cursor: pointer;
      border-bottom: 1px solid #ddd;
    }
    .category:hover {
      background-color: #e0e0e0;
    }
    .content {
      flex: 1;
      padding: 5px;
      display: block;
      overflow-y: auto;
      height: 100%;
      box-sizing: border-box;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;  /* IE and Edge */
    }
    .content::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }
    .thumbnail {
      width: 100%;
      height: 50px;
      margin-bottom: 4px;
      background-color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="categories">
      <div class="category" onclick="showCategory('geometry')">几何体</div>
      <div class="category" onclick="showCategory('light')">灯光</div>
      <div class="category" onclick="showCategory('model')">模型</div>
      <div class="category" onclick="showCategory('label')">标签</div>
      <div class="category" onclick="showCategory('effect')">特效</div>
    </div>
    <div class="content" id="content">
      <!-- 缩略图将在这里显示 -->
    </div>
  </div>

  <script>
    const data = {
      geometry: [
        "立方体", "球体", "圆柱", "金字塔", "圆锥", "长方体",
        "四面体", "八面体", "十二面体", "二十面体", "棱柱", "棱锥",
        "截锥", "截椎", "环体", "双曲面", "抛物面", "椭球体",
        "超级椭球体", "心形体", "旋转体", "螺旋体", "管道体", "星形体",
        "双曲抛物面", "波浪面", "网格面", "三角面", "Bezier 曲面", "NURBS 曲面"
      ],
      light: ["点光源", "平行光", "聚光灯", "环境光"],
      model: ["房子", "树", "车", "桥", "人", "动物"],
      label: ["标签1", "标签2", "标签3", "标签4"],
      effect: ["烟雾", "光晕", "火焰", "雷电"]
    };

    function showCategory(type) {
      const content = document.getElementById('content');
      content.innerHTML = '';
      data[type].forEach(item => {
        const div = document.createElement('div');
        div.className = 'thumbnail';
        div.textContent = item;
        content.appendChild(div);
      });
    }

    // 默认显示第一个分类
    showCategory('geometry');
  </script>
</body>
</html>
